﻿@model LetLord.Models.ResidentialProperty
<div class="modal-header">
    <h4 id="myModalLabel" data-id="@Model.Address.Line1,@if (Model.Address.Line2 != null) { @Model.Address.Line2; },@Model.Address.TownCity,@Model.Address.County">
        @Model.Address.Line1, 
        @if (Model.Address.Line2 != null)
        {@Model.Address.Line2;
        }
        @Model.Address.TownCity, @Model.Address.County, @Model.Address.PostCode
    </h4>
</div>
<div class="modal-body">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#overview" data-toggle="tab">Overview</a></li>
        <li><a href="#gallery" data-toggle="tab">Gallery</a></li>
        <li><a href="#map" data-toggle="tab">Map</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="overview">
            <div class="row-fluid">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <td>@Html.Bootstrap().LabelFor(x => x.MonthlyRate).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 14px" })€@Model.MonthlyRate.ToString("0.##")</td>
                            <td>@Html.Bootstrap().LabelFor(x => x.SizeSquareMeters).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 14px" })@Model.SizeSquareMeters</td>
                            <td>@Html.Bootstrap().LabelFor(x => x.NumberOfBedrooms).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 14px" })@Model.NumberOfBedrooms</td>
                            <td>@Html.Bootstrap().LabelFor(x => x.NumberOfBathrooms).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 14px" })@Model.NumberOfBathrooms</td>
                            <td>@Html.Bootstrap().LabelFor(x => x.NumberOfReceptionRooms).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 14px" })@Model.NumberOfReceptionRooms</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.Bootstrap().LabelFor(x => x.HasBackGarden).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 14px" })
                                @if (Model.HasBackGarden == true)
                                {
                                    <img src="~/Images/success32.png" />
                                }
                                else
                                {
                                    <img src="~/Images/close.png" />
                                }
                            </td>
                            <td>
                                @Html.Bootstrap().LabelFor(x => x.HasFrontGarden).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 14px" })
                                @if (Model.HasFrontGarden == true)
                                {
                                    <img src="~/Images/success32.png" />
                                }
                                else
                                {
                                    <img src="~/Images/close.png" />
                                }
                            </td>
                            <td>
                                @Html.Bootstrap().LabelFor(x => x.HasSecureParking).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 14px" })
                                @if (Model.HasSecureParking == true)
                                {
                                    <img src="~/Images/success32.png" />
                                }
                                else
                                {
                                    <img src="~/Images/close.png" />
                                }
                            </td>
                            <td>
                                @Html.Bootstrap().LabelFor(x => x.IsDisabledFriendly).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 14px" })
                                @if (Model.IsDisabledFriendly == true)
                                {
                                    <img src="~/Images/success32.png" />
                                }
                                else
                                {
                                    <img src="~/Images/close.png" />
                                }
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
                <div>
                    @Html.Bootstrap().LabelFor(x => x.Description).ShowRequiredStar(false).HtmlAttributes(new { @style = "font-weight: bold; font-size: 16px" })
                    @Html.DisplayFor(x => x.Description, new { @style = "text-align: justify;" })
                </div>
            </div>
        </div>
        <div class="tab-pane" id="gallery">
            <div id="2nd-year-project-carousel" class="carousel slide">
                <div class="carousel-inner">
                    <div class="active item">
                        <img class="img-rounded" src="http://static.dezeen.com/uploads/2009/02/westerdok-apartment-building-by-mvrdv-westerdok-004.jpg" />
                    </div>
                    <div class="item">
                        <img class="img-rounded" src="http://www.hotelartsbarcelona.com/files/media-db/accommodation/suites/340-apartment-presidential-suite-living-room.jpg" />
                    </div>
                    <div class="item">
                        <img class="img-rounded" src="http://www.futureproofingproperty.org/wp-content/uploads/2012/11/Apartment-1.jpg" />
                    </div>
                    <div class="item">
                        <img class="img-rounded" src="http://galway.travelinireland.com/pictures/menlo-park-apartment-self-catering-galway-ireland.jpg" />
                    </div>
                </div>
                <a class="carousel-control left" href="#2nd-year-project-carousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#2nd-year-project-carousel" data-slide="next">&rsaquo;</a>
            </div>
        </div>
        <div class="tab-pane" id="map">
            <div id="map-canvas" style="width: 505px; height: 300px;"></div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn" id="close-property-modal" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
<script type="text/javascript">

    initialize();
    codeAddress();

    var geocoder;
    var map;

    function initialize() {
        geocoder = new google.maps.Geocoder();
        var myOptions = {
            zoom: 13,
            center: geocoder.address,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    }

    function codeAddress() {
        var address = $('#myModalLabel').attr('data-id');
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
    google.maps.event.addDomListener(window, "load", initialize);
    
</script>
